<template>
  <div id="photoview-container" class="photoview-container" v-if="photoInfo.visible">
    <div class="photoview-tools">
      <div class="button return" @click="photoInfo.visible=false"><i
        class="fa fa-chevron-left"></i><span>&ensp;&ensp;返回  </span></div>
      <span>{{ currentImg.desc }}&ensp;&ensp;</span>
      <!-- <div class="button rotate"  @click="rotateEvent"> <span>旋转90°  </span><i class="fa fa-rotate-left (alias)"></i>      </div> -->
    </div>
    <div class="photoview-window">
      <div class="prev-photo">
        <div class="arrow-container-left" @click="prevPhoto">
          <div class="arrow-left">
            <i class="fa fa-chevron-left fa-5x"></i>
          </div>
        </div>
      </div>
      <div class="window-viewport">
        <div class="picture-container">
          <img id="viewport" :class="'viewport '+ imgRotate " :src="currentImg.src">
        </div>
      </div>
      <div class="next-photo">
        <div class="arrow-container-right" @click="nextPhoto">
          <div class="arrow-right">
            <i class="fa fa-chevron-right fa-5x"></i>
          </div>
        </div>
      </div>
    </div>
    <!-- <div class="photoview-desc">
        <span>尺寸:{{imgSize}}&ensp;&ensp;</span>
        <span>[ 第<b>{{currentIndex+1}}</b>张 / 共<b>{{totalImg}}</b>张 ]</span>
    </div> -->
    <div class="photoview-scroll">
      <div class="prev-group" @click="prevGroup">
        <i class="fa fa-angle-double-left fa-3x"></i>
      </div>
      <div class="scroll-container">
        <ul class="scroll-list" :style="'width:'+scrollListWidth+'px' ">
          <li v-for="(item,index) in photoInfo.photos" @click="gotoPhoto(index)" :key="'img-'+index"
              :class="{'current-img': index == currentIndex }" class="picture" :id="'img-'+index"><img :src="item.src"
                                                                                                       class="accept-default-image">
          </li>
        </ul>
      </div>
      <div class="next-group" @click="nextGroup">
        <i class="fa fa-angle-double-right fa-3x"></i>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "PhotoViewer",
  props: {
    photoInfo: {
      type: Object,
      default: () => {
        return {}
      }
    },
  },
  methods: {
    initDefaultPhoto() {    //初始化默认照片
      this.totalImg = this.photoInfo.photos.length;
      if (this.photoInfo.defaultIndex && this.photoInfo.defaultIndex < this.photoInfo.photos.length) {
        this.currentIndex = this.photoInfo.defaultIndex;
        this.currentImg = this.photoInfo.photos[this.photoInfo.defaultIndex]
      } else {
        this.photoInfo.defaultIndex = 0;
        this.currentImg = this.photoInfo.photos[0]
      }

    },
    prevPhoto() {    //切换上一张照片
      if (this.currentIndex == 0) {
        this.currentIndex = this.totalImg - 1;
      } else {
        this.currentIndex = this.currentIndex - 1;
      }
      //this.currentImg = this.photoInfo.photos[this.currentIndex ]
    },
    nextPhoto() {    //切换下一章照片
      if (this.currentIndex == this.totalImg - 1) {
        this.currentIndex = 0;
      } else {
        this.currentIndex = this.currentIndex + 1;
      }
      //this.currentImg = this.photoInfo.photos[this.currentIndex ]
    },
    gotoPhoto(index) {   //跳转到 第几张 照片
      this.currentIndex = index;
      this.currentImg = this.photoInfo.photos[this.currentIndex]
    },
    getImageSize() {    //获取图片的原始尺寸
      let i = new Image(); //新建一个图片对象
      i.src = this.currentImg.src; //将图片的src属性赋值给新建图片对象的src
      return new Array(i.width, i.height); //返回图片的长宽像素
    },
    autoResize() {   //尺寸自适应
      this.$nextTick(function () {
        const containerWidth = document.querySelector(".scroll-container").clientWidth;
        this.scrollContainerWidth = containerWidth - 40;
      })
    },
    nextGroup() {    //下一组图片
      if (this.pageIndex == this.pageNum - 1) {
        this.currentIndex = 0;
      } else {
        this.currentIndex = (this.pageIndex + 1) * this.pageSize;
      }
      console.log('向下翻页：', this.pageIndex, this.currentIndex, this.pageSize)
      //$(".scroll-container").animate({scrollLeft: (this.pageIndex*this.scrollContainerWidth)}, 1000);
    },
    prevGroup() {    //上一组图片
      if (this.pageIndex == 0) {
        this.currentIndex = (this.pageNum - 1) * this.pageSize;
        this.pageIndex = this.pageNum - 1
      } else {
        this.currentIndex = (this.pageIndex - 1) * this.pageSize;
      }
      console.log('向上翻页：', this.pageIndex, this.currentIndex, this.pageSize)
    },
    rotateEvent() {
      if (this.imgRotate == '' || this.imgRotate == 'imgRotate0') {
        this.imgRotate = 'imgRotate90';
      } else if (this.imgRotate == 'imgRotate90') {
        this.imgRotate = 'imgRotate180';
      } else if (this.imgRotate == 'imgRotate180') {
        this.imgRotate = 'imgRotate270';
      } else if (this.imgRotate == 'imgRotate270') {
        this.imgRotate = 'imgRotate0';
      }

    }
  },
  watch: {
    currentIndex(newValue, oldValue) {  //当前的找片发生了改变
      this.currentImg = this.photoInfo.photos[newValue];
      //计算当前找片位于第几页上
      const refPageIndex = Math.trunc((newValue) / this.pageSize);
      //将旋转的标签复位
      this.imgRotate = '';
      if (refPageIndex != this.pageIndex) {
        this.pageIndex = refPageIndex;
        // 为了简化 代码， 在common.js中引入了jquery
        $(".scroll-container").animate({scrollLeft: (this.pageIndex * (130 * this.pageSize))}, 1000);
      }
    }
  },
  computed: {
    imgSize() {  //获取图片原始尺寸
      const imgSize = this.getImageSize();
      return imgSize[0] + '×' + imgSize[1]
    },
    scrollListWidth() {  //获取图片滚动
      const cellWidth = 130;
      this.pageSize = Math.trunc(this.scrollContainerWidth / cellWidth);
      this.pageNum = Math.ceil(this.totalImg / this.pageSize);
      return this.pageNum * this.scrollContainerWidth < this.scrollContainerWidth ? this.scrollContainerWidth : this.pageNum * this.scrollContainerWidth;
    }
  },
  mounted() {
    this.initDefaultPhoto();
    window.addEventListener('resize', this.autoResize, false);
    this.$nextTick(function () {
      this.autoResize();
    })

  },
  destroyed() {
    window.removeEventListener('resize', this.autoResize);
  },
  data() {
    return {
      currentImg: {src: '', desc: ''},
      currentIndex: 0,
      totalImg: 0,
      scrollContainerWidth: 1000,
      pageNum: 1,
      pageSize: 10,
      pageIndex: 0,
      imgRotate: 'imgRotate90'
    }
  },
}
</script>

<style scoped>
ul, ol {
  list-style: none;
}

.imgRotate0 {
  -moz-transform: rotate(0deg);
  -webkit-transform: rotate(0deg);
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0);
}

.imgRotate90 {
  -moz-transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
}

.imgRotate180 {
  -moz-transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
}

.imgRotate270 {
  -moz-transform: rotate(270deg);
  -webkit-transform: rotate(270deg);
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

#photoview-container {
  position: fixed;
  overflow: hidden;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, .7);
  z-index: 100001;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.photoview-tools {
  position: fixed;
  top: 20px;
  left: 20px;
  right: 20px;
  text-align: center;
  font-size: 2rem;
}

.photoview-tools .button {
  padding-left: 28px;
  box-sizing: border-box;
  float: left;
  width: 135px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  background-color: rgba(0, 0, 0, .8);
  color: var(--font-color);
  font-size: 18px;
  margin-right: 15px;
  cursor: pointer;
}

.photoview-tools .return {
  padding-right: 20px;
}

.photoview-tools .rotate {
  float: right;
  padding-right: 20px;
}

.photoview-window {
  position: fixed;
  top: 50%;
  width: 100%;
  height: 65%;
  -webkit-transform: translateY(-60%);
  -ms-transform: translateY(-60%);
  transform: translateY(-60%);
}

.photoview-window .window-viewport {
  position: relative;
  margin: auto;
  height: 100%;
  width: 80%;
}

.photoview-window .window-viewport .picture-container {
  height: 100%;
  width: 100%;
  text-align: center;
}

.photoview-window .window-viewport .viewport {
  position: relative;
  max-width: 100%;
  max-height: 100%;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  -webkit-transition: .15s ease-in-out;
  transition: .15s ease-in-out;
  border: 3px solid var(--button-background-color);
  border-radius: 5px;
  background-color: darkgrey;
  -webkit-animation: move .25s;
  animation: move .25s;
}

.photoview-window .prev-photo {
  position: absolute;
  height: 100%;
  width: 10%;
  left: 0;
  top: 0;
}

.photoview-window .next-photo {
  position: absolute;
  height: 100%;
  width: 10%;
  right: 0;
  top: 0;
}

.photoview-window .arrow-container-right {
  width: 90px;
  height: 90px;
  position: absolute;
  border-radius: 50px;
  top: 41%;
  left: 10%;
  background-color: rgba(0, 0, 0, .9);
  cursor: pointer;
}

.photoview-window .arrow-container-left {
  width: 90px;
  height: 90px;
  position: absolute;
  border-radius: 50px;
  top: 41%;
  right: 10%;
  background-color: rgba(0, 0, 0, .9);
  cursor: pointer;
}

.photoview-window .arrow-right {
  width: 26px;
  height: 50px;
  position: absolute;
  top: 10px;
  left: 25px;
}

.photoview-window .arrow-left {
  width: 26px;
  height: 50px;
  position: relative;
  top: 10px;
  left: 15px;
}

.photoview-desc {
  position: absolute;
  bottom: 116px;
  height: 60px;
  width: 100%;
  text-align: center;
}

.photoview-desc span {
  height: 100%;
  line-height: 60px;
  font-family: 'Times New Roman', Times, serif;
  font-size: 2rem;
}

.photoview-scroll {
  position: absolute;
  box-sizing: border-box;
  width: 100%;
  padding: 15px;
  height: 116px;
  bottom: 0;
  background-color: rgba(0, 0, 0, .8);
}

.photoview-scroll .scroll-container {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  height: 100%;
  width: 90%;
  overflow: hidden;
}

.photoview-scroll .scroll-container .scroll-list {
  position: absolute;
  -webkit-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
}

.photoview-scroll .picture {
  float: left;
  margin-right: 10px;
  border: 3px solid rgba(0, 0, 0, .8);
  overflow: hidden;
}

.photoview-scroll .current-img {
  border: 3px solid var(--button-background-color);
}

.photoview-scroll .scroll-container .picture,
.photoview-scroll .scroll-container .picture img {
  width: 120px;
  height: 80px;
}

.photoview-scroll .next-group {
  height: 86px;
  width: 35px;
  position: absolute;
  right: 15px;
  top: 15px;
  background-color: #000;
  cursor: pointer;
  padding-top: 20px;
}

.photoview-scroll .prev-group {
  height: 86px;
  width: 35px;
  position: absolute;
  left: 15px;
  top: 15px;
  background-color: #000;
  cursor: pointer;
  padding-top: 20px;
}

.photoview-scroll .arrow-right {
  width: 13px;
  height: 25px;
  position: absolute;
  top: 30px;
  right: 10px;
}

.photoview-scroll .arrow-left {
  width: 13px;
  height: 25px;
  position: absolute;
  top: 30px;
  right: 10px;
}
</style>>
